<template>
  <div class="leftTopStyle" ref="leftTopStyle">

  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { ref, onMounted } from "vue"
const leftTopStyle = ref()

const init = () => {
  let myCharts1 = echarts.init(leftTopStyle.value);
  let option = ref({
    tooltip: {
      trigger: "axis",
      showContent: true,
      axisPointer: {
        type: "shadow",
      },
    },
    emphasis: {
      label: {
        fontSize: 18,
        fontWeight: 600,
        color: "#F8F8FF",
        show: false,
        position: "top",
        formatter: "{c}",
      },
    },

    grid: {
      left: "1%",
      top: "15%",
      right: "10%",
      containLabel: true,
      bottom: "2%"
    },

    legend: {
      data: ["图例1", "图例2", "图例3"],
      top: "0",
      left: "right",
      align: 'left',
      orient: 'horizontal',
      itemGap: 25,
      lineHeight: 35,
      padding: [0, 0, 0, 0],
      formatter: function (params: any) {
        return params
      },
      textStyle: {
        color: "white",
        // width:50,
        fontSize: 16,
        height: 10,

        // backgroundColor:'red',
        padding: [0, 0, 0, 10],
        lineHeight: 24,
        align: 'center',
      },
      itemStyle: {
        // backgroundColor:'red',
      },
      itemWidth: 20,
      itemHeight: 20,
      // selected: { '志愿者服务贡献价值折线（万元）': false } // 不需要显示的设置为false
    },

    xAxis: {
      data: ["2016", "2017", "2018", "2019", "2020", "2021", "2022"],
      axisLine: {
        show: true, //隐藏X轴轴线
        lineStyle: {
          type: "dashed",
          color: "#3d5269",
          width: 2,
        },
      },
      axisTick: {
        show: true, //隐藏X轴刻度
        alignWithLabel: true,
      },
      axisLabel: {
        margin: 20,
        show: true,
        textStyle: {
          color: "white", //X轴文字颜色
          fontSize: 14,
        },
        interval: 0,
        // rotate: 30
      },
    },

    yAxis: [
      {
        type: "value",
        // name: "人数",
        nameTextStyle: {
          color: "white",
          fontSize: 16,
          margin: 20,
        },
        name: '单位(万元)',
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            width: 2,
            color: "#3d5269",
            opacity: 0.3,
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#FFFAFA",
            fontSize: 14,
          },
        },
      },
      // {
      //   type: "category",
      //   gridIndex: 0,
      //   // data: dataSource.map((item) => item.name),
      //   // name: "使用率%",
      //   nameTextStyle: {
      //     color: "#396A87",
      //     fontSize: 14,
      //   },
      //   inverse: true,
      //   position: "right",
      //   splitLine: {
      //     show: false,
      //   },
      //   axisTick: {
      //     show: false,
      //   },
      //   axisLine: {
      //     show: false,
      //     lineStyle: {
      //       color: "#396A87",
      //       width: 2,
      //     },
      //   },
      //   axisLabel: {
      //     align: 'right',
      //     show: true,
      //     formatter: (_,index)=>{
      //       return '10%'
      //     }, //右侧Y轴文字显示
      //     textStyle: {
      //       color: "#396A87",
      //       fontSize: 14,
      //     },
      //     rich: {
      //       value: {
      //         color: '#fff',
      //         fontSize: 12,
      //         fontWeight: 500,
      //       },
      //     },
      //   },
      // },

      {
        splitLine: {
          show: false,
          lineStyle: {
            type: "dashed",
            width: 2,
            color: "#3d5269",
            opacity: 0.3,
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        type: 'value',
        // name: 'Temperaturdde',
        min: 0,
        max: 12500,
        // interval: 5,
        axisLabel: {
          formatter: `{value}` + '%'
        }
      }
    ],

    series: [
      {
        name: "图例1",
        type: "bar",
        barWidth: 15,
        barCategoryGap: '90%',
        // barGap:'10%',
        itemStyle: {
          normal: {
            borderWidth: 2,
            // borderColor: "rgba(84,255,159,1)",
            // background: "linear-gradient(to bottom, #8f41e9, #578aef)",
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(33,68,147,0.8)",
              },
              {
                offset: 0.5,
                color: "rgba(18,35,88,0.4)",
              },
              {
                offset: 1,
                color: "rgba(4,18,68,0.4)",
              },
            ]),
            borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(30,144,255,1)",
              },
              {
                offset: 0.5,
                color: "rgba(30,144,255,0.5)",
              },
              {
                offset: 1,
                color: "rgba(30,144,255,0.3)",
              },
            ]),
          },
        },
        label: {
          fontSize: 16,
          color: "#F8F8FF",
          show: false,
          position: 'top',
          formatter: "{c}",
          //   }
        },
        data: [5000, 4000, 5000, 3000, 6000, 4000, 8000]
      },
      {
        name: "图例2",
        type: "bar",
        barWidth: 15,
        barCategoryGap: '90%',
        // barGap:'10%',
        itemStyle: {
          normal: {
            borderWidth: 2,
            // borderColor: "rgba(84,255,159,1)",
            // background: "linear-gradient(to bottom, #8f41e9, #578aef)",
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(84,255,159,0.6)",
              },
              {
                offset: 0.5,
                color: "rgba(78,238,148,0.4)",
              },
              {
                offset: 1,
                color: "rgba(67,205,128,0.2)",
              },
            ]),
            borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(84,255,159,1)",
              },
              {
                offset: 0.5,
                color: "rgba(84,255,159,0.5)",
              },
              {
                offset: 1,
                color: "rgba(84,255,159,0)",
              },
            ]),
          },
        },
        label: {
          fontSize: 16,
          color: "#F8F8FF",
          show: false,
          position: 'top',
          formatter: "{c}",
          //   }
        },
        data: [3000, 6000, 2000, 5000, 3000, 4000, 5000]
      },
      {
        name: '图例3',
        data: [4200, 3300, 3100, 5000, 3000, 4000, 3600],
        type: 'line',
        itemStyle:{
          normal:{
            color:'#45A5FF'
          }
        },
        smooth: true
      }
    ]
  })

  myCharts1.setOption(option.value);
  window.addEventListener("resize", function () {
    myCharts1.resize();
  });
}

onMounted(() => {
  init()
})
</script>

<style lang="scss" scoped>
.leftTopStyle {
  width: 100%;
  height: 100%;
}
</style>